<template>
<div class="permission">
  <div class="desc">
    <div>
      <ep-title :title=this.c03Data.c0303Name></ep-title>
      <ep-count text="数据量" :count=this.dataCount unit="条"></ep-count>
    </div>
    <div>
      <ep-proofread text="已排查："  :count=this.checkedOut unit="条"></ep-proofread>
      <ep-proofread
          style="margin-left: 15px"
          text="未排查："
          :count=this.noChecked
          unit="条"
      ></ep-proofread>
      <ep-progress
          style="margin-left: 15px"
          width="150px"
          :percent=this.checkedPercent
      />
      <ep-button :size="size" style="margin-left: 15px"  @click="() =>{this.showRanking()}">排查排行</ep-button>
    </div>
  </div>

<!--  <zh-row :span="24" style="height: 100%; flex-direction: column">
    <zh-col>
      <zh-form ref="userQueryFrom" :model="queryParam">
        <zh-input
            prop="taskArea"
            type="tree"
            mode="multiple"
            label="管理区域"
            placeholder="支持多选"
            ref="taskArea"
            allowClear
            tree-checkable
            multiple
            v-model="queryParam.manageAreas"
            :treeData="taskAreaTree"
            :showCheckedStrategy="SHOW_PARENT"
            :span="16"
            style="float: left"
            :labelCol="{ span: 3 }"
            :wrapperCol="{ span: 10 }"
            @change="manageAreaChange()"
        >
        </zh-input>
      </zh-form>
    </zh-col>
  </zh-row>-->
  <div class="operate">

    <div>
      <div style="flex: 0 0 auto">
        <ep-search
            v-model="queryParam.b0102"
            placeholder="请输入点位名称"
            enter-button="chaxun "
            :size="size"
            @search="() =>{this.listQuery()}"
        ></ep-search>
      </div>
      <ep-button :size="size" style="margin-left: 15px" icon="refresh.svg" @click="() =>{this.flushPage()}"></ep-button>
      <a-tree-select
          placeholder="请选择管理区域(可多选)"
          ref="taskArea"
          allowClear
          tree-checkable
          style="margin-left: 15px;width:22vw"
          v-model="queryParam.manageAreas"
          :show-checked-strategy="SHOW_PARENT"
          :treeData="taskAreaTree"
          @change="manageAreaChange()"
          :size="size"
      />
    </div>

    <div style="float: right">
<!--      <div class="field">
        <ep-button style="margin-left: 15px" icon="field.svg" @click="fieldVisible = !fieldVisible">字段展示</ep-button>
        <div class="field-box" v-if="fieldVisible">
          <ul>
            <li v-for="(column, index) in tableColumn" :key="index">
              <vxe-checkbox v-model="column.visible" :key="index" v-if="column.type !== ('radio' || 'checkbox')">{{column.title }}</vxe-checkbox>
            </li>
          </ul>
          <div class="btn">
            <p @click="fieldConfirm">确认</p>
            <p @click="fieldRevert">还原</p>
          </div>
        </div>
      </div>-->
      <column-manage :column.sync="tableColumn" @change="columnChange"></column-manage>
      <ep-button :size="size" style="margin-left: 15px" icon="export.svg" @click="() =>{this.exportExcel()}">导出</ep-button>
    </div>

  </div>

  <a-modal
      title="排查任务排行"
      centered
      style=""
      width="90%"
      destroyOnClose
      :mask-closable="false"
      v-model="visible"
      @cancel="handleCancel"
  >
    <check-tasks-ranking-form ref="checkTasksRankingForm" @handleCancel="handleCancel" @showOrHide ="showOrHide"></check-tasks-ranking-form>
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
  </a-modal>

  <div class="ep-table">
    <zh-table ref="tasksList" size="medium" style="width:100%" height="400px" :data="tableData" rowId="roleId"  type="paging"
              :columns="tableColumn" @checkbox-change="selectChangeEvent" @checkbox-all="selectAllEvent"
               :url="tableUrl">
    </zh-table>
  </div>

</div>
</template>
<script>
import modal from 'ant-design-vue/es/modal'
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import {
  getManageType, getPermissionParams,
  getTaskDetails, getTaskDetailsInit
} from '@/services/system/whdngxlApi'
import EpButton from "@/components/assembly/button";
import UnmovableRelics from "@/pages/whdngxl/TasksCheckManage/UnmovableRelics";
import {getBatchDict} from "@/services/system/api";
import ColumnManage from "@/components/assembly/columnManage";
import {TreeSelect} from "ant-design-vue";
import {mapGetters} from "vuex";
export default {
  name: "CheckTaskDetailsForm",
  computed: {
    ...mapGetters(['size']),
  },
  components: {
    ColumnManage,
    EpButton,
    checkTasksRankingForm : ()  =>import ("@/pages/system/form/CheckTasksRankingForm"),
  },
  data() {
    return {
      dictData: {
      },
      filtersData:{},
      queryParam:{
        b0102:'',
    manageAreas: undefined,
      },
      taskAreaTree: [],
      SHOW_PARENT,
      tableUrl:getTaskDetails,
      labelCol: {
        xs: {span: 24},
        sm: {span: 8}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      // 分页参数
      tablePage: {
        total: 0,
        currentPage: 1,
        pageNum: 1,
        pageSize: 200
      },
      tableColumn: [
        {type: 'checkbox', width: 50, fixed: 'left',visible: true},
        {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号',visible: true},
        {field: 'b0101', title: '文物ID',visible: false, align: 'center', width: 150},
        {field: 'c0101', title: '排查任务信息表ID',visible: false, align: 'center', width: 150},
        {field: 'b0102',title: '名称', align: 'center', width: 150,visible: true},
        {field: 'b0104Name',title: '古系列类别', align: 'center',filters:[], width: 150,visible: true},
        {field: 'b0105Name', title: '文保级别', align: 'center',filters:[], width: 120,visible: true},
        {field: 'b0106Name', title: '时代', align: 'center',filters:[], width: 150,visible: true},
        {field: 'b0109', title: '地址', align: 'center', width: 200,visible: true},
        {field: 'manageArea', title: '管理区域', align: 'center', width: 200,visible: true},
        // {field: 'b0107',title: '县市区', align: 'center', width: 100,visible: true},
        // {field: 'b0108',title: '街道', align: 'center', width: 120,visible: true},
        {field: 'b0117Name', title: '省级文保类别', align: 'center',filters:[], width: 150,visible: true},
        {field: 'b0118Name', title: '省级文保子类', align: 'center',filters:[], width: 150,visible: true},
        {field: 'updateName', title: '最近修改人', align: 'center', width: 130,visible: true},
        {field: 'b0113Name',title: '是否核销', align: 'center',filters:[], width: 120,visible: true},
        {field: 'b0114Name',title: '是否安全', align: 'center',filters:[], width: 120,visible: true},
        {field: 'b0115Name',title: '是否划定保护双线', align: 'center',filters:[], width: 150,visible: true},
        {field: 'b0121', title: '开放时间', align: 'center',sortable:true, width: 120,visible: true},
        {field: 'c0103Name',title: '排查状态', align: 'center',filters:[], width: 120,visible: true},
        {field: 'c0105Name',title: '审核状态', align: 'center',filters:[], width: 120,visible: true},
      ],
      tableData: [],
      //表头
      toolbarConfig: {
        custom: true,
        slots: {}
      },
      c03Data:{
        c0301:'',
        c0303Name:'',
        c0305:'',
      },
      visible: false,
      dataCount:'0',//数据量
      checkedOut:'0',//已排查
      noChecked:'0',//未排查
      selectedRowKeys: [], /*table选中keys*/
      selectionRows : [],/*table选中records*/
      checkedPercent:0,
      fieldVisible: false,
      manageRate:'',
    }
  },
  mounted() {
  },
  created() {
//获取任务范围
    this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });
  },
  methods: {
    manageAreaChange() {
      this.listQuery();
      this.getTaskDetailsInit()
    },
    init() {
    },
    initData(data){
      const params ={}
      this.$http.post(getManageType, params).then(res => {
        if(res.result){
          this.manageRate =  res.result.rate
        }
      })
      const params2 = {}
      params2.dictFields = 'b0104,b0105,b0106,b0113,b0114,b0115,b0117,b0118,c0103,c0105'
      this.$http.post(getBatchDict, params2).then(res => {
        this.dictData = res.result
        //获取筛选数据
        UnmovableRelics.methods.getFiltersData(this,'tasksList')
      })
      this.$nextTick(()=>{
        if(data){
          this.c03Data = data
          this.getTaskDetailsInit()
          this.listQuery()
        }
      })
    },
    getTaskDetailsInit(){
      const params = {}
      params.c0301 = this.c03Data.c0301
      params.manageAreas = this.queryParam.manageAreas
      setTimeout(() => {
        this.$http.post(getTaskDetailsInit, params).then((res) => {
          if (res.result) {
            this.dataCount = Number(res.result.dataCount)
            this.checkedOut = Number(res.result.checkedOut)
            this.noChecked = Number(res.result.noChecked)
            this.checkedPercent = (Math.round(((Number(this.checkedOut)
                /(Number(this.dataCount)))) * 100))
          }
        }).catch((error) => {
          console.log(JSON.stringify(error))
          this.$message.error('获取初始化数据失败')
        }).finally(() =>{
        })
      }, 50)
    },
    flushPage(){
      this.queryParam.b0102 = ""
      this.listQuery()
    },
    listQuery(){
      if(this.c03Data.c0301 == '' || this.c03Data.c0301 == null){
        modal.warn({title: '提示', content: '排查任务总表ID不能为空'})
      }
      const params = {}
      params.c0301 = this.c03Data.c0301
      params.b0102 = this.queryParam.b0102
      params.manageAreas = this.queryParam.manageAreas
      this.$refs.tasksList.query(params)
    },
    handleCancel() {
      this.visible=false
    },
    showOrHide() {
      this.visible=!this.visible
    },
    showRanking(){
      this.showOrHide()
      this.$nextTick(()=>{
        this.$refs.checkTasksRankingForm.initData(this.c03Data,this.manageRate);
      })
    },
    exportExcel(){

    },
    // 字段展示- 筛选确认
 /*   fieldConfirm() {
      this.fieldVisible = false;
      this.$refs.tasksList.refreshColumn();
    },
    // 字段展示-还原
    fieldRevert() {
      this.fieldVisible = false;
      this.tableColumn.forEach((el) => {
        el.visible = true;
      });
      this.$refs.tasksList.refreshColumn();
    },*/
    columnChange() {
      this.$refs.tasksList.refreshColumn();
    },
    //复选框事件(保留翻页选中的数据)
    selectChangeEvent({ checked, records, reserves, row }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      // console.log('当前选中的数据行：' + row )
      //勾选选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0){
          this.selectedRowKeys = records.map(v => v.aac147);
          this.selectionRows = records;
        }else {
          //aac147集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [...reserves.map(v => v.aac147),...records.map(v => v.aac147)];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves,...records];
        }
      }else {
        //取消选中时
        let aac147Index = this.selectedRowKeys.indexOf(row.aac147);
        if (aac147Index > -1) {
          //删除取消选中删除指定元素aac147
          this.$delete(this.selectedRowKeys, aac147Index);
        }

        let dataIndex = null;
        for(let i = 0; i < this.selectionRows.length; i++) {
          if (this.selectionRows[i].aac147 == row.aac147) {
            dataIndex = i;
            break;
          }
        }
        //删除取消选中的元素整个对象
        this.$delete(this.selectionRows, dataIndex);
      }
    },
    //vxe复选框当前页全选中方法(保留翻页选中的数据)：
    selectAllEvent({ checked, records, reserves}) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      //全选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0){
          this.selectedRowKeys = records.map(v => v.aac147);
          this.selectionRows = records;
        }else {
          //aac147集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [...reserves.map(v => v.aac147),...records.map(v => v.aac147)];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves,...records];
        }
      }else {
        //取消全选时,直接将翻页数据赋值，当前页数据不用加上
        this.selectionRows = reserves;
        this.selectedRowKeys = reserves.map(v => v.aac147)
      }
    },
  }
}
</script>

<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }


  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
}
</style>
